import React from 'react'
import {
  inject,
  observer
} from 'mobx-react'
import {
  Paper,
  Card,
  CardHeader,
  CardText,
  CardActions,
  RaisedButton,
} from 'material-ui'
import './styles.css'
import { TopicStore } from '../../store/topic-store'

const topicStore = new TopicStore()

@inject(stores => {
  return {
    topicStore
  }
})

@observer
class TopicDetail extends React.Component {
  componentDidMount() {
    this.getTopicDetail()
  }

  getTopicDetail() {
    const topicId = this.props.match.params.id
    this.props.topicStore.getTopicDetail(topicId)
  }

  render() {
    const detail = this.props.topicStore.detail
    return (
      <Paper className="container">
        <Card>
          <CardHeader
            title={detail.title}
            subtitle={`作者：${detail.author}`}
          />
          <CardText
            dangerouslySetInnerHTML={{__html: detail.content}}
          />
          <CardActions>
            <RaisedButton label="返回" href="/" />
            <RaisedButton label="返回列表" href="/topic" primary={true} />
          </CardActions>
        </Card>
      </Paper>
    )
  }
}

export default TopicDetail
